<template>

 
  <div class="body">

    <Header></Header>
    <!-- <div class="logo">
      <img src="../../assets/static/title-img.png" alt=""/>
    </div> -->
  
    <div class="container">
      <div class="searchBox">
       期刊导航/{{ c_NAME }}/{{ curyear }}年{{ curissue }}<span v-show="qqq">期</span>
      </div>
    </div>
    <div id="baseInfo_jdetail" class="book line-b-dashed-grey">
      <div class="bp-copy1 left">
        <img id="BookCoverUrl" :src="src" width="212" height="295">

      </div>
      <div class="bt left">
        <div id="booktitle" class="title">{{ c_NAME }}</div>
        <div id="BookYearIssueTag" class="subTitle-copy1"><span id="showYearIssue">{{ curyear }}年{{ curissue }}<span v-show="qqq">期</span></span>
        </div>
        <input type="hidden" id="jouranlFlcode" value="QS0103;X09;m02" data-field="journal_flcode">
        <div class="info line-b-dashed-grey">·<strong class="c-orange">主办单位:</strong>{{ organizer }}</div>
        <div class="info line-b-dashed-grey">·<strong class="c-orange">刊期:</strong>{{ type }}</div>
        <div class="info line-b-dashed-grey">·<strong class="c-orange">出版地:</strong>{{ location }}</div>
        <div class="info line-b-dashed-grey">·<strong class="c-orange">ISSN:</strong>{{ issn }}</div>
        <div class="info line-b-dashed-grey">·<strong class="c-orange">CN:</strong>{{ cn }}</div>
      </div>
    </div>
    <div>
      <div class="detail bgc-f3f8fd line-b-dashed-grey jdetailYear">
        <div class="YearDiv navcontent" id="year">

          <div class="YearUL swiper-container">
            <swiper class="swiper swiper-wrapper" :options="swiperOption">
              <!-- <li  class=""  :class="{YearSelect:index==selectyearcur}"  @click="changeyear(iteam,index)"> -->
              <swiperSlide v-for="(iteam,index) in year" :key="iteam.index">
                <div :class="{YearSelect:index==selectyearcur}" @click="changeyear(iteam.cyear,index)">{{ iteam.cyear }}</div>
              </swiperSlide>

              <!-- </li> -->
            </swiper>

            <div class="swiper-button-prev" v-show="year.length>20" slot="button-prev"></div>
            <div class="swiper-button-next" v-show="year.length>20" slot="button-next"></div>
          </div>

        </div>

      </div>
      <div class="detail bgc-f3f8fd line-b-dashed-grey jdetailYear">
        <div class="IssueDiv navcontent">
          <swiper class="swiper swiper-wrapper" :options="swiperOption1" ref="meterChartSwiper">
            <swiperSlide v-for="(iteam ,index) in Mot" :key="iteam.index">
              <div :class="{YearSelect:index==issueSelect}" @click="changeissue(iteam,index)">
                {{ iteam.cstage }}
              </div>
            </swiperSlide>

          </swiper>

          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev swiper-button-prev_1" v-show="Mot.length>20" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-next_1" v-show="Mot.length>20" slot="button-next"></div>
        </div>
      </div>
    </div>
    <div id="CataLogListPanel"><input type="hidden" id="jdetailTotal" value="34">
      <div id="CataLogView_1" class="ab ab-bg1" style="display: block; min-height: 140px">
        <div class="chapter">
          <div class="ct">目录</div>
<!--          <div class="nodata" v-if="total<=0">暂无数据请联系管理员</div>-->
          <!-- <div v-for=" (val,key,index) in groupdata" :key="index">
                <span class="chapter_title">
                    
                       {{ key }}
                </span> -->
            <div v-for="(item,index)  in  groupdata" :key="index" class="content" style="display: inline-block;">
              <div class="name" @click="gotodetails(item)">
                
                <a class="jumpdetail" :title="item.篇名 ">{{ item.篇名 }}</a>
              </div>
              <div class="authorinfo">
                <span class="catalogpage" target="_blank" title="item.page"> {{ item.页 }}</span>
                <span class="catalogauthor" target="_blank" title="item.author;">{{ item.作者 }}</span>

              </div>
            </div>
        <!-- </div>
       -->
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :hide-on-single-page="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :page-size="pageSize">
      </el-pagination>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <span>未登录！请返回首页登录。是否登录？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="routeGoLogin()">确 定</el-button>
  </span>
    </el-dialog>
        <!-- <onlinereadProgress ref="onlinereadref" :tableName="tableName" :sysId="sysId"  /> -->
  </div>
</template>

<script>

import 'swiper/dist/css/swiper.css'
import 'swiper/dist/css/swiper.css'
import Header from "../common/header.vue";
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import {  defaultsearch, selectyear, selectqi} from "@/api/cjfx";
//import onlinereadProgress  from '@/views/components/onlinereadProgress.vue'

// //搜索组件
// import searchComponent from './component/journal/search.vue'
// //头部导航
// import dangxiaoIndexHeader from './component/journal/journalIndexHeader.vue'
//footer
// import bottomFooter from './component/journal/footer.vue'
// import {pdfdown, onlineread,} from '@/api/common'
// import {
//   defaultsearch, selectyear, selectqi, Periodical, PeriodicalYear, PeriodicalStage
// } from "@/api/journalcb";
// import Cookies from "js-cookie";
// import util from '@/utils/util.js';
// Array.prototype.groupBy = function (group) {
//   return group && typeof group === 'function' ? Array.prototype.reduce.call(this, function (c, v) {
//     var k = group(v);
//     if (c.hasOwnProperty(k)) {
//       c[k].push(v);
//     } else {
//       c[k] = [v];
//     }
//     return c;
//   }, {}) : this;
// }


export default {
  components: {
    swiper, swiperSlide,Header
  },

  data() {
    return {
      percentage:0, //进度条的占比
      progressShow: false, // 是否显示进度条弹出层
      qqq:false,
     // ips:util.ips,
      showmake:false,
      dialogVisible1: false,
      tableName:'',
      sysId:'',
      groupdata: {},
      selectyearcur: 0,//当前年份索引切换用
      curyear: "",//当前年份
      curissue: "",//当前期刊
      issueSelect: "",//当前期刊索引切换用
      qksrc: "",
      c_NAME: "",
      cn: "",
      issn: "",
      location: "",
      organizer: "",
      type: "",
      pykm: "",
      page: 1,
      pageSize: 20,
      cataloglist: [],//目录
      swiperOption: {
        slidesPerView: 20,
        spaceBetween: 0,
        direction: 'horizontal',
        navigation: {
          nextEl: '#year .swiper-button-next',
          prevEl: '#year .swiper-button-prev'
        }
      },
      swiperOption1: {
        slidesPerView: 20,
        spaceBetween: 0,
        direction: 'horizontal',
        navigation: {
          nextEl: '.swiper-button-next_1',
          prevEl: '.swiper-button-prev_1'
        }
      },

      year: [],
      Mot: [
        '01', '02', '03',
      ],

      topChart: null,
      activefgk: 0,
      activeIndex: '1',
      // activeIndex2: '1',
      total: 0,
      PeopleListImg: './assets/journal/gk_book4.png',
      presentPath: '整刊展示',
      name1: '期刊导航',
      src1:'',

    }
  },

  computed: {
    src: function () {
      if (this.$route.query.number) {
        return this.src1
      } else {
        return "https://c61.cnki.net/CJFD/big/" + this.pykm + "//" + this.pykm + this.curyear + this.curissue + ".jpg"
      }

    }
  },

  created() {

  
  },
  mounted() {
      this.defaultsearch(this.$route.query.pykm)
  },

  methods: {
    routeGoLogin() {
      this.dialogVisible1 = false
      this.$router.push({

        path: '/index',

      })
    },
    read() {
      console.log(this.$route.query.tableName)
      console.log(this.$route.query.sysId)



    },
   gotodetails(item){
     console.log(item)
     this.$router.push({path:'/detail',query:{index:item.index,id:item.id}})
   },
   

    updown() {
      // console.log(this.$route.query.tableName)
      // console.log(this.$route.query.sysId)
      // let token = Cookies.get('token')
      // if (token) {
      //   let items = {
      //     tableName: this.tableName,
      //     sysId: this.sysId,
      //   }
      //   pdfdown(items)
      // } else {
      //   this.dialogVisible1 = true

      // }


    },

    // handleSizeChange(val) {
    //   this.$emit("handleSizeChange", val);
    // },
    changeMenu(item) {
      this.$emit("changeMenu", item);
    },
    change(item) {
      this.present = this.menuList.indexOf(item)
    },
    //切换年
    async changeyear(val, index) {
        this.selectyearcur = index
        this.curyear = val
        var data = await selectyear({
          pykm: this.pykm,
          cyear: val

        })
        this.Mot = data.data.data 
        this.issueSelect = 0
        this.curissue = this.Mot[0].cstage
        this.selectqi(this.curissue, this.pykm, this.curyear)
    },
    changeissue(val, index) {
        this.issueSelect = index
        this.curissue = val.cstage
       this.selectqi(this.curissue,this.pykm,this.curyear)
    },
    async defaultsearch(pykm) {
      var data = await defaultsearch({
        PinyinName: pykm
      });

     console.log("eee",data)
      if (data.data.data) {
       
        var result = data.data.data
        
        this.c_NAME = result.c_NAME
        this.cn = result.cn
        this.issn = result.issn
        this.location = result.cbd
        this.type = result.kq1
        this.organizer = result.sponsorOne
        this.year = result.years
        this.pykm = result.pinyinName
        this.curyear = result.years[0].cyear,
        this.selectyear(this.pykm, this.curyear)
      }
      ///console.log(1111,data)
    },
    //获取年期
    async selectyear(pykm, year) {
      var data = await selectyear({
        pykm: pykm,
        cyear: year
      });
       console.log("year",data)
      this.Mot = data.data.data
      this.curissue = data.data.data[0].cstage
     // console.log("curissue",this.curissue)
      this.selectqi(this.curissue, this.pykm, this.curyear)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val
      console.log(`当前页: ${val}`);
      console.log(this.page)
      this.selectqi(this.curissue, this.pykm, this.curyear)

    },
    //获取目录
    async selectqi(qi, pykm, year) {
      var data = await selectqi({
        stage: qi,
        pykm: pykm,
        year: year,
      
      })

      console.log("es年期",data.data.data.list)

      this.groupdata=data.data.data.list

 
       for(let i=0;i<this.groupdata.length;i++){
        if(this.groupdata[i].页.indexOf('-')>0){
        this.groupdata[i].pagesort= parseInt(this.groupdata[i].页.split('-')[0])
        }
        else{
           this.groupdata[i].pagesort=parseInt(this.groupdata[i].页)
        }
       }
        console.log("es年期1",this.groupdata.sort(this.compare))
     // var result = data.data.data;
      // if (result.count) {
      //   console.log('目录', result);
      //   // this.total = result.count
      //   // this.cataloglist = result.index

      //   // this.groupdata = this.cataloglist.groupBy(it => it.classify)
      //   // console.log("222", this.groupdata)
      // } else {
      //   this.total = 0//为了隐藏分页栏目
      // }

    },

    compare(a,b){
      if(a.pagesort<b.pagesort){
        return -1;
      }
      else if(a.pagesort>b.pagesort){
        return  1;
      }
      else{
        return 0;
      }
    }



  },
}
</script>

<style scoped>
.body {
  background: #f0f1f3;
  overflow: hidden;
}



.logo img {
  margin-left: 80px;
  margin-top: 30px;
}

.container {
  width: 1200px;
  height: 56px;
  background-color: #e3e4e6;
  /*opacity: 0.05;*/
  margin: 20px auto;
}

.TextOne {
  width: 1153px;
  height: 409px;
  background-color: #ffffff;
  border: solid 1px #d8d8d8;
  margin: 0 auto;
  display: flex;
}

.TextOneImg {
  width: 285px;
  height: 389px;
  box-shadow: 2px 2px 4px 0px rgba(7, 22, 48, 0.18);
  margin: 10px;
}

.TextOneText {
  width: 858px;
}

.TextOneTT {
  width: 100%;
  height: 28px;
  font-family: SourceHanSansCN-Bold;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #424242;
  text-align: center;
  margin-top: 20px;
}

.TextOneSpan {
  width: 765px;
  height: 40px;
  line-height: 40px;
  font-family: SourceHanSansCN-Normal;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #c8161d;
  margin: 10px;
  border-bottom: dashed 1px #c8161d;

}

.TextOneData {
  width: 100%;
  height: 16px;
  text-align: center;
  font-family: SourceHanSansCN-Regular;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #505050;
  margin: 12px 0;
}

.TextOneSpan > :last-child {
  font-family: SourceHanSansCN-Normal;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0px;
  color: #717171;
}

.searchBox {
  height: 56px;
  line-height: 56px;
  font-family: SourceHanSansCN-Regular;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #848385;
  /*opacity: 0.69;*/
}

.content .right {
  width: 930px;
  margin-bottom: 64px;
}

.detail {
  width: 1158px;
  overflow: hidden;
  padding-top: 11px;
  padding-bottom: 10px;
  margin: 0 auto;
}

.line-b-dashed-grey {
  border-bottom: 1px dashed #e6736e;
}

.YearDiv {
  float: left;
  margin-left: 10px;
  display: inline;
  position: relative;
  overflow: hidden;
  width: 500px;
  font-size: 12px;
  height: 25px;
  width: 100%;
}

.YearUL div.curGroup {
  display: block;
}

.YearUL li {
  margin-left: 0px;
  line-height: 22px;
  display: block;
  width: 50px;
  text-align: center;
  float: left;
  cursor: pointer;
  font-weight: normal;
}

.bgc-f3f8fd {
  background-color: #ebf6ed;
}

.YearSelect, .IssueSelect, .tree-title, .navi_py_title {
  background-color: #de0716 !important;
  color: #fff !important;
}

.IssueDiv {
  float: left;
  height: 22px;
  margin-left: 5px;
  display: inline;
  position: relative;
  overflow: hidden;
  font-size: 12px;
  width: 100%;
}

.IssueDiv ul {
  height: 22px;
  line-height: 22px;
}

.IssueDiv ul li {
  float: left;
  width: 42.5px;
  display: block;
  cursor: pointer;
  text-align: center;
  font-weight: normal;
}


.swiper-wrapper {
  height: 25px;
  text-align: center;
  line-height: 25px;
  width: 95%;
}

.swiper-slide {
  cursor: pointer;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-prev {
  background-image: url('../../assets/img/botton_left.png');

}

.swiper-button-next {
  background-image: url(../../assets/img/botton_right.png);
}

/* 目录 */
#CataLogListPanel {

  width: 1158px;
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 20px;
}

.ab {
  background-position: center 14px;
  padding-top: 10px;
  background-repeat: no-repeat;
  margin: 0 auto;
  padding: 0 5px 0 10px;
}
.chapter{
  min-height: 200px;
}
.ab .chapter .ct {
  text-align: center;
  font-size: 14px;
  line-height: 42px;
  color: #333333;
  font-weight: bold;
}

.chapter_title {
  color: #333;
  font-weight: bold;
  font-size: 15px;
  padding: 5px 0;
  float: left;
}

.ab .content {
   background-image: url(../../assets/img/k-index10.gif); 
  background-repeat: repeat-x;
  background-position: left center;
  line-height: 42px;
  font-size: 14px;
  overflow: hidden;
  width: 100%;
}

.ab .content .name {
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  background-color: #FFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.ab .content .authorinfo {
  float: right;
  height: 42px;
  width: 25%;
  min-width: 40px;
  padding-right: 5px;
}

.ab .content .authorinfo .catalogpage {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30%;
  min-width: 40px;
  float: right;
  background: #fff;
  text-align: right;
  /* padding-right: 5px; */
}

.ab .content .authorinfo .catalogauthor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
  float: right;
  position: relative;
  background: #fff;
  padding-right: 5px;
}

.book {
  width: 1158px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;

}

.book .bp-copy1 {
  padding: 4px;
  width: 225px;
  height: 320px;
}

.left {
  float: left;
}

.book .bt {
  padding-top: 10px;
  width: 67%;
}

.book .bt .title {
  font-size: 24px;
  font-weight: bold;
  color: #434343;
  text-align: center;
  line-height: 46px;
}

.book .bt .subTitle-copy1 {
  text-align: center;
  line-height: 39px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.book .bt div {
  width: 100%;
  float: left;
  padding-left: 10px;
}

.book .bt .info {
  line-height: 36px;
  color: #656565;
}

.book .bp-copy1 img {
  border: 1px solid #e6736e;
}

.el-pagination {

  text-align: center;
  padding-bottom: 20px;
}



.nodata {
  height: 200px;
}
 .ab .content a {
    color: #333333;
    cursor: pointer;
}
</style>
